<template>
  <div class="main">
    <div id="leaflet" class="leaflet"></div>
    <div class="select">
      <el-select
        v-model="stateStationSelected"
        placeholder="国控点（可多选）"
        multiple
        @change="selectStateStation"
      >
        <el-option
          v-for="item in stateStationList"
          :key="item.station_code"
          :label="item.station"
          :value="item.station_code"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import L from "leaflet";
import stateStationIcon from "../assets/img/20200413102959.png";
import { getCityDistrict, getStateStationRealtime } from "../axios/api";

export default {
  data() {
    return {
      stateStationSelected: [],
      stateStationList: []
    };
  },
  methods: {
    getCityDistrict() {
      getCityDistrict(data => {
        this.initMap(data);
        this.loadTileLayer();
        this.loadGeoJSON(data);

        getStateStationRealtime(data => {
          this.stateStationList = data;
          this.crateStateStationList(data);
        });
      });
    },
    selectStateStation() {
      this.clearStateStationGroup();
      let dataFilter = this.stateStationList.filter(item1 => {
        return this.stateStationSelected.some(item2 => {
          return item2 === item1.station_code;
        });
      });
      console.log(dataFilter);
      this.crateStateStationList(dataFilter);
    },
    clearStateStationGroup() {
      if (this.stateStationGroup !== null) {
        this.map.removeLayer(this.stateStationGroup);
      }
    },
    initMap(data) {
      this.map = L.map("leaflet", {
        center: [data.lat, data.lng],
        zoom: 13
      });
    },
    loadTileLayer() {
      L.tileLayer(
        "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=bebf738d00ce5ce52058e5d1619d4f5c",
        {
          maxZoom: 18,
          minZoom: 9,
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          detectRetina: true
        }
      ).addTo(this.map);

      L.tileLayer(
        "https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=bebf738d00ce5ce52058e5d1619d4f5c",
        {
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
        }
      ).addTo(this.map);
    },
    loadGeoJSON(data) {
      let __this = this;
      let layer = new L.geoJSON(JSON.parse(data.geojson), {
        coordsToLatLng: function(coords) {
          let wgs = __this.gps.gcj02ToWgs84(coords[1], coords[0]);
          return L.CRS.EPSG4326.unproject(L.point(wgs.lng, wgs.lat));
        },
        style: {
          fillColor: "transparent",
          color: "#ff0"
        }
      });
      this.geoJSONGroup = new L.LayerGroup();
      this.geoJSONGroup.addLayer(layer);
      this.geoJSONGroup.addTo(this.map);
    },
    crateStateStationList(data) {
      this.stateStationGroup = new L.LayerGroup();
      data.forEach(item => {
        this.createStateStation(item);
      });
      this.stateStationGroup.addTo(this.map);
    },
    createStateStation(data) {
      let latLng = new L.LatLng(data.latitude, data.longitude);

      let icon = L.icon({
        iconUrl: stateStationIcon,
        iconSize: [16, 16],
        iconAnchor: [8, 8]
      });
      let iconMarker = new L.marker(latLng, { icon: icon });
      this.stateStationGroup.addLayer(iconMarker);

      let address = L.divIcon({
        html: `<p>${data.station}</p>`,
        className: "address",
        iconSize: [80, 25],
        iconAnchor: [40, -15]
      });
      let addressMarker = new L.marker(latLng, { icon: address });
      this.stateStationGroup.addLayer(addressMarker);

      let array500 = this.gps.getCircleLatLng(
        data.latitude,
        data.longitude,
        0.5
      );
      let polygon500 = L.polygon(array500, {
        color: "#ff0000",
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0
      });
      this.stateStationGroup.addLayer(polygon500);

      let array1000 = this.gps.getCircleLatLng(
        data.latitude,
        data.longitude,
        1.0
      );
      let polygon1000 = L.polygon(array1000, {
        color: "#ff9000",
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0
      });
      this.stateStationGroup.addLayer(polygon1000);

      let array3000 = this.gps.getCircleLatLng(
        data.latitude,
        data.longitude,
        3.0
      );
      let polygon3000 = L.polygon(array3000, {
        color: "#ffc000",
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0
      });
      this.stateStationGroup.addLayer(polygon3000);

      let array10000 = this.gps.getCircleLatLng(
        data.latitude,
        data.longitude,
        10.0
      );
      let polygon10000 = L.polygon(array10000, {
        color: "#ffc000",
        dashArray: [5, 5],
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0
      });
      this.stateStationGroup.addLayer(polygon10000);
    }
  },
  mounted() {
    this.getCityDistrict();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.main
  position relative
  width 100%
  height 100%

  .leaflet
    position relative
    width 100%
    height 100%

    >>> .leaflet-marker-icon.address
      > p
        position relative
        width 100%
        height 20px
        border 1px solid #000
        background-color #fff
        border-radius 5px
        text-align center
        line-height 20px
        font-size 12px
        color #000

  > .select
    position absolute
    top 15px
    right 15px
    z-index 999
</style>
